<!--
 * @Descripttion:
 * @version:
 * @Author: sueRimn
 * @Date: 2020-10-20 17:48:29
 * @LastEditors: sueRimn
 * @LastEditTime: 2020-11-13 16:53:53
-->
<template>
  <div class="app-container">
    <div v-pageRoles="['5fae3907167cc']">
      <div class="screenHeader">
        <div class="searchInput">
          <el-input v-model="searchValue" size="medium" placeholder="请输入姓名" class="input-with-select">
            <el-button slot="append" size="medium" icon="el-icon-search" @click="searchList" />
          </el-input>
        </div>
        <div>
          <el-button size="medium" icon="el-icon-refresh" @click="shuaXin">刷新</el-button>
        </div>
      </div>
      <el-table
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
      >
        <el-table-column align="center" label="序号" width="50">
          <template slot-scope="scope">
            {{ scope.$index+1 }}
          </template>
        </el-table-column>
        <el-table-column label="姓名" align="center" width="100">
          <template slot-scope="scope">
            {{ scope.row.answer_name }}
          </template>
        </el-table-column>
        <el-table-column label="联系方式" width="110" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.phone }}</span>
          </template>
        </el-table-column>
        <el-table-column label="身份" width="90" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.users_type == 1 ? '学生' : (scope.row.users_type == 2 ? '老师' : '家长') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="对象" width="90" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.group">{{ scope.row.group.face == 1 ? '学生' : '家长' }}</span>
            <span v-else>{{ scope.row.zoom.face == 1 ? '学生' : '家长' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="参与项目" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.group">{{ scope.row.group.group_name }}</span>
            <span v-else>{{ scope.row.zoom.zoom_name }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="参与时间" width="200">
          <template slot-scope="scope">
            <i class="el-icon-time" />
            <span>{{ scope.row.create_time }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="课程推荐" width="90">
          <template slot-scope="scope">
            <!-- <span>{{ scope.row.status === 0 ? '未推荐' : '已推荐' }}</span> -->
            <el-tag v-if="scope.row.status == 0" type="warning">未推荐</el-tag>
            <el-tag v-else>已推荐</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="120"
          align="center"
        >
          <template slot-scope="scope">
            <el-button v-pageRoles="['5fab7812f3713']" size="mini" type="success" @click="toPreviewReport(scope.row)">报告预览</el-button>
          <!-- <el-button size="mini" type="primary">在线沟通</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <div class="bottomPagination">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="[10,30,50]"
          :page-size="pageSize"
          layout=" sizes, prev, pager, next,total, jumper"
          :total="total"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
    </div>
    <noRolesTips v-noRolesTips="['5fae3907167cc']" />
  </div>

</template>

<script>
import { getRespondent } from '@/api/respondent'
import noRolesTips from '@/components/noRolesTips'
export default {
    name: 'IntelligentTestUsers',
    components: {
        noRolesTips
    },
    filters: {
        statusFilter(status) {
            const statusMap = [
                'warning',
                ''
            ]
            return statusMap[status]
        }
    },
    data() {
        return {
            searchValue: '', // 搜索
            list: [], // 列表
            currentPage: 1, // 页数
            total: 0, // 总数
            pageSize: 10, // 每页条数
            listLoading: true, // table 加载
            dialogTableVisible: false // 创建
        }
    },
    created() {
        this.get_UserList()
    },
    methods: {
        shuaXin() {
            this.currentPage = 1
            this.get_UserList()
        },
        toUrl(url) {
            this.$router.push(url)
        },
        handleClose(done) {
            done()
        },
        handleCurrentChange(val) {
            this.currentPage = val
            this.get_UserList()
        },
        handleSizeChange(val) {
            this.currentPage = 1
            this.pageSize = val
            this.get_UserList()
        },
        searchList() {
            this.currentPage = 1
            if (this.searchValue === '') this.get_UserList()
            this.listLoading = true
            getRespondent({
                limit: this.pageSize,
                page: this.currentPage,
                answer_name: this.searchValue
            }).then(res => {
                if (res.code === 200) {
                    this.list = res.data.list
                    this.total = res.data.total
                }
                this.listLoading = false
            })
        },
        // 获取问卷列表
        get_UserList() {
            this.listLoading = true
            getRespondent({
                limit: this.pageSize,
                page: this.currentPage
            }).then(res => {
                console.log('res', res)
                if (res.code === 200) {
                    this.list = res.data.list
                    console.log(this.list)
                    this.total = res.data.total
                }
                this.listLoading = false
            })
        },
        toPreviewReport(row) {
            var id
            if (row.group) {
                id = row.group.unid
            }
            var zoomGroup
            if (row.zoom) {
                id = row.zoom.unid
                zoomGroup = JSON.stringify(row.zoom_group)
            }
            console.log(row, id)
            this.$router.push({ path: '/user/previewReport', query: { phone: row.phone, group_id: id, respondent_id: row.unid, zoomGroup }})
        }

    }
}
</script>

<style scoped lang="scss">
.screenHeader {
    width: 100%;
    margin: 15px 0;
    display: flex;
    justify-content: space-between;

    .searchInput {
        width: 300px;
    }

}
.bottomPagination {
    padding: 15px 0;
}

.radioRow {
    width: 100%;
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
}

</style>
